<template>
    <div>
        <div class="container">
            <div class="table_btn">
                <el-button  icon="el-icon-refresh" >刷新</el-button>
                <el-button type="success" icon="el-icon-lx-roundadd" @click="addShow">添加</el-button>
                <el-button type="danger" icon="el-icon-delete"  @click="allDelete()">批量删除</el-button>
                <el-button type="primary" icon="el-icon-sort" @click="handleSort">排序</el-button>
            </div>
            <div>
                <el-table
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="id"
                        border
                        default-expand-all
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            el-table-column
                            type="selection"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称">
                    </el-table-column>

                    <el-table-column
                            prop="id"
                            label="ID"
                            width="60">
                    </el-table-column>

                    <el-table-column
                            prop="list_order"
                            label="排序"
                            width="80">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.list_order" size="mini"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="cate_type"
                            label="分类类型"
                            width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.cate_type==1 ">频道页</el-tag>
                            <el-tag type="info" v-if="scope.row.cate_type==2 ">发布栏目</el-tag>
                            <el-tag type="warning" v-if="scope.row.cate_type==3 ">跳转</el-tag>
                            <el-tag type="danger" v-if="scope.row.cate_type==4 ">单页</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="description"
                            label="描述"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            prop="status"
                            label="状态"
                            width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"
                                    disable-transitions>{{scope.row.status == 1 ?'显示':'隐藏'}}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作"  width="200">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    icon="el-icon-edit"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)">
                                编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="handleDelete(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <!--添加-->
        <el-dialog title="添加栏目" :visible.sync="dialogFormVisible"  width="35%">
            <el-form :model="form"  ref="form" label-width="100px">

                <el-form-item label="上级栏目" prop="pid">
                      <el-tree-select
                              :props="props"
                              :options="menuTree"
                              :value="valueId"
                              :clearable="isClearable"
                              :accordion="isAccordion"
                              @getValue="getValue($event)">
                      </el-tree-select>
                </el-form-item>

                <el-form-item label="名称" prop="name" >
                    <el-input v-model="form.name" style="width: 41%"></el-input>
                </el-form-item>

                <el-form-item label="描述" prop="description">
                    <el-input  type="textarea " v-model="form.description" ></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status"
                               active-text="正常"
                               inactive-text="隐藏"
                               active-value="1"
                               inactive-value="0"
                    ></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>
<script>

    import TreeTable from "../../common/treeTable/index"
    import ElTreeSelect from "../../common/treeSelect/index"
    import utils  from "@/utils/function"
    const  { request } = utils
    export default {
        components: {ElTreeSelect, TreeTable},
        data() {
            return {
                dialogFormVisible:false,
                form:{},
                options:[],
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
                tableData: [],
                isClearable:true,      // 可清空（可选）
                isAccordion:true,      // 可收起（可选）
                valueId:0,            // 初始ID（可选）
                props:{                // 配置项（必选）
                    value: 'id',
                    label: 'name',
                    children: 'children',
                },
                menuTree:[

                ],
                value: '',
                isShowSelect:false,
            }
        },
        methods: {
            addShow(){          //显示添加
                request.loading().get("/system/cms/menu/add").then(res=>{
                    let {code,data:{menus,typeChecker},msg} = res

                    if(code === 0){
                        this.dialogFormVisible = true
                        menus[0].disabled = true
                        this.menuTree = menus
                    } else {

                    }

                })

            },
            handleSort() {          //排序
                const getSortData = function (arr) {
                    let obj = {};
                    let result = {};
                    while (obj = arr.shift()) {
                        if (!obj.id || !obj.list_order) {
                            break;
                        }
                        result[obj.id] = obj.list_order + ""
                        if (obj.children && obj.children.length && obj.children.length > 0) {
                            result = Object.assign(result, getSortData(obj.children))
                        }
                    }

                    return result;
                }

                let sorts = getSortData(_.cloneDeep(this.tableData));
                request.loading().post("/system/cms/menu/sort", {sorts: sorts}).then(response => {
                    let {code, data, msg} = response
                    if (code === 0) {
                        this.getTreeList();
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                    } else {
                        this.$message.error(msg);
                    }
                })
            },
            handleEdit(index,row){
                console.log(index);
                console.log(row);
            },
            handleDelete(index,row){
                console.log(index);
                console.log(row);
            },
            getValue(value){
                this.valueId = value;
                console.log(this.valueId);
            },
            getTreeList(){
                return request.loading().get("/system/cms/menu/list").then(response=>{
                    let {code,data:{list},msg} = response
                    if(code === 0){

                        if(_.isArray(list) && list.length > 0){
                            this.tableData = list
                        } else {
                            this.tableData = []
                        }



                    } else {
                        this.$message.error(msg);
                    }
                    return response
                })
            }

        },
        created(){
            this.getTreeList();
        }
    }
</script>
<style>
    .i_fontsize{font-size: 1.5em}
    /*下拉框选择树*/
    .objectTree {
        margin-left:97px;
        position: absolute;
        overflow: auto;
        z-index: 100;
        height: 200px;
        border: 1px solid #ddd;
        line-height: normal;
        z-index: 204;
    }
    .width-220{
        width: 220px
    }
</style>
